<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drools 规则引擎测试平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- Header -->
        <header class="bg-primary text-white py-4 mb-4">
            <div class="container">
                <h1 class="display-4 text-center">
                    <i class="fas fa-cogs me-3"></i>
                    Drools 规则引擎测试平台
                </h1>
                <p class="lead text-center">个性化推荐 | 风控评估 | 定价计算</p>
            </div>
        </header>

        <div class="container">
            <div class="row">
                <!-- 个性化推荐 -->
                <div class="col-lg-4 mb-4">
                    <div class="card h-100 shadow">
                        <div class="card-header bg-success text-white">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-user-tag me-2"></i>
                                个性化推荐
                            </h5>
                        </div>
                        <div class="card-body">
                            <form id="recommendForm">
                                <div class="mb-3">
                                    <label for="userId" class="form-label">用户ID</label>
                                    <input type="text" class="form-control" id="userId" value="user123" required>
                                </div>
                                <div class="mb-3">
                                    <label for="segments" class="form-label">用户类型</label>
                                    <select class="form-select" id="segments" required>
                                        <option value="VIP">VIP用户</option>
                                        <option value="新用户">新用户</option>
                                        <option value="普通用户">普通用户</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="age" class="form-label">年龄</label>
                                    <input type="number" class="form-control" id="age" value="25" min="1" max="120" required>
                                </div>
                                <div class="mb-3">
                                    <label for="region" class="form-label">地区</label>
                                    <input type="text" class="form-control" id="region" value="北京" required>
                                </div>
                                <div class="mb-3">
                                    <label for="channel" class="form-label">渠道</label>
                                    <select class="form-select" id="channel" required>
                                        <option value="mobile">手机APP</option>
                                        <option value="web">网页</option>
                                        <option value="wechat">微信</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="page" class="form-label">页面ID</label>
                                    <input type="text" class="form-control" id="page" value="page001" required>
                                </div>
                                <div class="mb-3">
                                    <label for="engagementScore" class="form-label">互动评分</label>
                                    <input type="number" class="form-control" id="engagementScore" value="80" step="1" min="0" max="100" required>
                                </div>
                                <button type="submit" class="btn btn-success w-100">
                                    <i class="fas fa-magic me-2"></i>获取推荐
                                </button>
                            </form>
                        </div>
                        <div class="card-footer">
                            <div id="recommendResult" class="result-area"></div>
                        </div>
                    </div>
                </div>

                <!-- 风控评估 -->
                <div class="col-lg-4 mb-4">
                    <div class="card h-100 shadow">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-shield-alt me-2"></i>
                                风控评估
                            </h5>
                        </div>
                        <div class="card-body">
                            <form id="riskForm">
                                <div class="mb-3">
                                    <label for="riskUserId" class="form-label">用户ID</label>
                                    <input type="text" class="form-control" id="riskUserId" value="user456" required>
                                </div>
                                <div class="mb-3">
                                    <label for="creditScore" class="form-label">信用评分</label>
                                    <input type="number" class="form-control" id="creditScore" value="750" min="300" max="850" required>
                                </div>
                                <div class="mb-3">
                                    <label for="income" class="form-label">月收入</label>
                                    <input type="number" class="form-control" id="income" value="15000" min="0" required>
                                </div>
                                <div class="mb-3">
                                    <label for="loanAmount" class="form-label">申请金额</label>
                                    <input type="number" class="form-control" id="loanAmount" value="100000" min="0" required>
                                </div>
                                <div class="mb-3">
                                    <label for="hasCollateral" class="form-label">是否有抵押</label>
                                    <select class="form-select" id="hasCollateral" required>
                                        <option value="true">是</option>
                                        <option value="false">否</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="employmentYears" class="form-label">工作年限</label>
                                    <input type="number" class="form-control" id="employmentYears" value="5" min="0" required>
                                </div>
                                <button type="submit" class="btn btn-warning w-100">
                                    <i class="fas fa-search me-2"></i>风险评估
                                </button>
                            </form>
                        </div>
                        <div class="card-footer">
                            <div id="riskResult" class="result-area"></div>
                        </div>
                    </div>
                </div>

                <!-- 定价计算 -->
                <div class="col-lg-4 mb-4">
                    <div class="card h-100 shadow">
                        <div class="card-header bg-info text-white">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-calculator me-2"></i>
                                定价计算
                            </h5>
                        </div>
                        <div class="card-body">
                            <form id="pricingForm">
                                <div class="mb-3">
                                    <label for="productId" class="form-label">产品ID</label>
                                    <input type="text" class="form-control" id="productId" value="PROD001" required>
                                </div>
                                <div class="mb-3">
                                    <label for="basePrice" class="form-label">基础价格</label>
                                    <input type="number" class="form-control" id="basePrice" value="1000" min="0" step="0.01" required>
                                </div>
                                <div class="mb-3">
                                    <label for="customerLevel" class="form-label">客户等级</label>
                                    <select class="form-select" id="customerLevel" required>
                                        <option value="GOLD">金牌客户</option>
                                        <option value="SILVER">银牌客户</option>
                                        <option value="BRONZE">铜牌客户</option>
                                        <option value="REGULAR">普通客户</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="quantity" class="form-label">购买数量</label>
                                    <input type="number" class="form-control" id="quantity" value="10" min="1" required>
                                </div>
                                <div class="mb-3">
                                    <label for="season" class="form-label">季节</label>
                                    <select class="form-select" id="season" required>
                                        <option value="SPRING">春季</option>
                                        <option value="SUMMER">夏季</option>
                                        <option value="AUTUMN">秋季</option>
                                        <option value="WINTER">冬季</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="region" class="form-label">地区</label>
                                    <input type="text" class="form-control" id="region" value="华北" required>
                                </div>
                                <button type="submit" class="btn btn-info w-100">
                                    <i class="fas fa-coins me-2"></i>计算价格
                                </button>
                            </form>
                        </div>
                        <div class="card-footer">
                            <div id="pricingResult" class="result-area"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 测试用例快速填充 -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header bg-secondary text-white">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-bolt me-2"></i>
                                快速测试用例
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <h6>个性化推荐测试</h6>
                                    <button class="btn btn-outline-success btn-sm me-2 mb-2" onclick="fillRecommendVIP()">VIP用户</button>
                                    <button class="btn btn-outline-success btn-sm me-2 mb-2" onclick="fillRecommendNew()">新用户</button>
                                    <button class="btn btn-outline-success btn-sm me-2 mb-2" onclick="fillRecommendLowScore()">低分内容</button>
                                </div>
                                <div class="col-md-4">
                                    <h6>风控评估测试</h6>
                                    <button class="btn btn-outline-warning btn-sm me-2 mb-2" onclick="fillRiskHigh()">高风险</button>
                                    <button class="btn btn-outline-warning btn-sm me-2 mb-2" onclick="fillRiskMedium()">中风险</button>
                                    <button class="btn btn-outline-warning btn-sm me-2 mb-2" onclick="fillRiskLow()">低风险</button>
                                </div>
                                <div class="col-md-4">
                                    <h6>定价计算测试</h6>
                                    <button class="btn btn-outline-info btn-sm me-2 mb-2" onclick="fillPricingGold()">金牌客户</button>
                                    <button class="btn btn-outline-info btn-sm me-2 mb-2" onclick="fillPricingBulk()">批量折扣</button>
                                    <button class="btn btn-outline-info btn-sm me-2 mb-2" onclick="fillPricingSeason()">季节调价</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Modal -->
    <div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2 mb-0">处理中...</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script th:src="@{/js/app.js}"></script>
</body>
</html>